<template>
  <el-container>
    <el-header>
      <div style="height: 60px;width: 100%;line-height: 60px;background-color: #333333;color: white">
        <div style="height: 60px;width: auto;line-height: 60px;float: left;margin-left: 90px">
          <span style="margin-left: 0px;font-size: 24px">校园兼职管理平台</span>
          <span style="margin-left: 15px" @click="goto('/job')">首页</span>
          <span style="margin-left: 15px" @click="goto('/job')">查看兼职</span>
          <span style="margin-left: 15px">关于我们</span>
          <span style="margin-left: 15px">联系我们</span>
          </div>
        <div style="height: 60px;width: auto;line-height: 60px;float: right;margin-right: 90px;color: white">
          <el-dropdown @command="handleCommand" v-if="this.loginStatue===true">
            <span class="el-dropdown-link" style="color: white">
              {{this.loginName}}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="likeJob">收藏</el-dropdown-item>
              <el-dropdown-item command="info">信息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span style="margin-left: 15px" v-if="this.loginStatue===true" @click="goto('/login')">退出登陆</span>
          <span style="margin-left: 15px" v-if="this.loginStatue===false" @click="goto('/login')">登录</span>
          <span style="margin-left: 15px" v-if="this.loginStatue===false" @click="goto('/register')">注册</span>
        </div>
      </div>
    </el-header>
    <el-main style="width: 100%;padding-left: 10%;padding-right: 10%">
      <div align="center">
        <img :src=messageValue alt="avatar" />
        <el-divider><i class="el-icon-message-solid"></i></el-divider>
        <span>{{messageContent}}</span>
      </div>

      <div class="el-card" style="margin-top: 20px"><router-view></router-view></div>
    </el-main>
  </el-container>
</template>

<script>
import {messageSearch} from "@/api/messageApi";

export default {
  name: "UserIndex",
  data(){
    return{
        message:{
          pageSize:5,
          pageNum:1
        },
      messageValue:'',
      messageContent:'',
      loginName:'',
      loginStatue:false
    }
  },
  methods:{
    getMessage(){
      messageSearch().then(res=>{
          if (res.code===200){
            this.messageValue=res.data.img;
            this.messageContent=res.data.content;
          }
      })
    },
    goto(path){
      this.$router.push(path)
    },
    handleCommand(command){
      this.goto(command);
    }
  },
  mounted() {
    this.getMessage();
    this.loginName=window.localStorage.getItem("userName");
    console.log(this.loginName)
    this.loginStatue=window.localStorage.getItem("token")!=null
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
